<template>
     <div class="mine">
         <!-- 二级我的 -->
         <div class="chihuo">
             <div class="chi">吃货卡</div>
         </div>
         
         <div class="hong">
             <div>红包</div>
             <div>余额</div>
         </div>

         <div class="hong xia">
             <div>我的地址</div>
             <div>我的客服</div>
             <div>店铺关注</div>
             <div>评价有礼</div>
         </div>

         <div class="hong zui">
             <div>邀好友赚钱</div>
             <div>饿了吗服务号</div>
         </div>
     </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
       *{
    margin: 0;
    padding: 0;
}
      .chihuo{
          display: flex;
          justify-content: center;
      }
     .mine .chi{
         text-align: center;

         width: 95%;
         height: 80px;
         border-radius: 10px;
         background-color: greenyellow;
         margin-top: 20px;
     }
     .hong{
         display: flex;
         justify-content: center;
         
     }
     .hong>div{
         color: red;
         text-align: center;
         font-size: 20px;
         width: 40%;
         height: 80px;
        background-color: #f5f5f5;
        margin: 10px;
        border-radius: 10px;
     }
     .xia>div{

         height: 50px;
         color: black;
         font-size: 16px;
     }
     .zui>div{
width: 45%;
height: 200px;
color: black;
font-size: 16px;
}
</style>